<dialog id="contact_modal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg mb-4">Add new Contact</h3>
        <form hx-post="{% url 'contacts:create-contact' %}"
              hx-target="#contact-table-body"
              hx-swap="afterbegin"
              hx-on:success="contact_modal.close(); this.reset()"
              class="mb-4">
            {% csrf_token %}
            <div class="form-control w-full">
                <label class="label">
                    <span class="label-text">Name</span>
                </label>
                {{ form.name }}
                {% if form.name.errors %}
                    <label class="label text-error">
                        {{ form.name.errors }}
                    </label>
                {% endif %}
            </div>

            <div class="form-control w-full">
                <label class="label">
                    <span class="label-text">Email</span>
                </label>
                {{ form.email }}
                {% if form.email.errors %}
                    <label class="label text-error">
                        {{ form.email.errors }}
                    </label>
                {% endif %}
            </div>

            <div class="form-control w-full">
                <label class="label">
                    <span class="label-text">Document</span>
                </label>
                {{ form.document }}
                {% if form.document.errors %}
                    <label class="label text-error">
                        {{ form.document.errors }}
                    </label>
                {% endif %}
            </div>


            <div class="modal-action">
                <button type="button" class="btn" onclick="contact_modal.close()">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Contact</button>
            </div>

        </form>
    </div>
</dialog>
